<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>$.ajax</title>
	</head>
	<!-- 
		jquery调用ajax方法：
		
		​		格式：$.ajax({});
		​			参数：
		​				type：请求方式GET/POST
		​				url：请求地址url
		​				async：是否异步，默认是true表示异步
		​				data：发送到服务器的数据
		​				dataType：预期服务器返回的数据类型
		​				contentType：设置请求头
		​				success：请求成功时调用此函数
		​				error：请求失败时调用此函数
	 -->
	<body>
		<button type="button" id="btn">查询数据</button>
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$.ajax({
			type:"get", // 请求方式
			url:"js/data.txt", // 请求地址
			data:{ // 请求数据，json对象
				uname:"zhangsan" // 如果没有参数，则不需要设置
			},
			// 请求成功时调用的函数
			success:function(data){  // data是形参名，代表的是返回的数据
				console.log(data); // 字符串
				// 将字符串转换成json对象
				var obj = JSON.parse(data);
				console.log(obj);
			}
		});
		
		/**
		 * 点击按钮，发送ajax请求，将数据显示到页面中
		 */
		$("#btn").click(function(){
			$.ajax({
				type:"get", // 请求方式
				url:"js/data.txt", // 请求地址
				data:{ // 请求数据，json对象
					// uname:"zhangsan" // 如果没有参数，则不需要设置
				},
				dataType:"json", // 预期返回的数据类型，如果是json格式，在接收到返回值时会自动封装成json对象
				// 请求成功时调用的函数
				success:function(data){  // data是形参名，代表的是返回的数据
					console.log(data); // 字符串
					// 将字符串转换成json对象
					// var obj = JSON.parse(data);
					// console.log(obj);
					// Dom操作
					// 创建ul 
					var ul = $("<ul></ul>");
					// 遍历返回的数据数组
					for(var i = 0; i < data.length; i++) {
						// 得到数组中的每一个元素
						var user = data[i];
						// 创建li元素
						var li = "<li>"+user.userName+"</li>";
						// 将li元素设置到ul元素中
						ul.append(li);
					}
					console.log(ul);
					// 将ul设置到body标签中
					$("body").append(ul);
				}
			});
		});
		
		
		
		
		
	</script>
</html>
